<template>
	<view id="homePage" class="page">
		<view class="header">
			<input class="search-input" type="text" placeholder="安全工器具信息检索" v-model="search" />
			<image class="scan" src="../../static/img/scan.png" mode="aspectFill"></image>
		</view>
		<view class="total_wrapper">
			<view class="nav-tit">
				<text>安具统计</text>
				<view class="" @click="toWire">
					<text>接地线管理</text>
					<image class="nav-arrow" src="../../static/img/arrow.png" mode="aspectFill"></image>
				</view>
				
				
			</view>
			<view class="total-con">
				<view class="total-tit">
					单位：扬州供电公司—输电检修一班
				</view>
				<view class="total-box">
					<view class="total-item" :class="{'active':active===0}" @click="tabSwitch(0)">
						<view class="total-num">
							12380
						</view>
						<view class="total-type">
							安具
						</view>
						<view class="total-label">
							资产总数
						</view>
					</view>
					<view class="total-item" :class="{'active':active===1}" @click="tabSwitch(1)">
						<view class="total-num">
							0
						</view>
						<view class="total-type">
							试验
						</view>
						<view class="total-label">
							即将到期
						</view>
					</view>
					<view class="total-item" :class="{'active':active===2}" @click="tabSwitch(2)">
						<view class="total-num">
							0
						</view>
						<view class="total-type">
							试验
						</view>
						<view class="total-label">
							已经到期
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-wrapper">
			<view class="item" v-for="item in list" :key="item.t_code" @click="toList(item.t_code)">
				<view class="item-pic">
					<image src="https://via.placeholder.com/100" mode="aspectFill"></image>
				</view>
				<view class="item-footer">
					<view class="item-label">
						{{item.t_name}}
					</view>
					<view class="item-num">
						1080
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '../../consts/api.js'
export default {
	data() {
		return {
			search: '',
			active: 0,
			
			list: []
		}
	},

	methods: {
		tabSwitch(n) {
			this.active = n
		},
		toWire() {
			uni.navigateTo({
				url: '../wire/wire',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		toList(t_code) {
			uni.navigateTo({
				url: `../list/list?t_code=${t_code}`,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		async histogram() {
			let res = await this.$fetch('GET',api.histogram)
			let {code, data} = res.data
			this.list = data
		}
	},
	onLoad() {
		this.histogram()
	}
}
</script>

<style>

.header {
	height: 80upx;
	position: relative;
	margin-top: 20upx;
}
.search-input {
	height: 80upx;
	width: 90%;
	background: #fff;
	border-radius: 80upx;
	margin: 0 auto;
	padding-left: 40upx;
}
.scan {
	width: 40upx;
	height: 40upx;
	position: absolute;
	right: 40upx;
	top: 20upx;
}
.total_wrapper {
	margin: 40upx 0 0 0;
	padding: 0 20upx;
}
.nav-tit {
	color: #FFFFFF;
	font-size: 36upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.nav-arrow {
	width: 36upx;
	height: 36upx;
}
.total-con {
	height: 320upx;
	border-radius: 30upx;
	background: #fff;
	margin: 20upx 0 0 0;
	padding-top: 20upx;
}
.total-tit {
	margin: 0 0 0 20upx;
	font-size: 32upx;
	color: #999999;
}
.total-box {
	display: flex;
}
.total-item {
	flex: 1;
	text-align: center;
	padding: 20upx 0;
}
.active {
	/* background: rgb(224,240,239); */
	color: rgb(54,155,152);
}
.total-num {
	font-size: 60upx;
	font-weight: bold;
}
.total-type {
	font-size: 32upx;
	color: #999999;
	margin: 20upx 0 0 0;
}
.total-label {
	margin: 10upx 0 0 0;
	font-size: 36upx;
}
.item {
	width: 224upx;
	height: 224upx;
	border-radius: 20upx;
	float: left;
	background: #FFFFFF;
	margin: 20upx 0 0 20upx;
}
.item-pic {
	width: 160upx;
	height: 160upx;
	margin: 10upx 30upx;
}
.item-pic image {
	width: 100%;
	height: 100%;
}
.item-footer {
	display: flex;
	font-size: 24upx;
	justify-content: space-between;
	padding: 0 20upx;
}
.item-num {
	color: rgb(46,152,148);
}
</style>
